<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    span {
      width: 40px;
      height: 40px;
      background-color: red;
      color: white;
      border-radius: 50%;
      display: block;
      text-align: center;
      line-height: 40px;
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 0
    }
  </style>
</head>

<body>
  <p>得分：<b>0</b></p>
  <script>
    /*
           实现思路：
               1、控制一个元素向下掉落
                   1、创建span标签 加入到页面上
                   2、随机生成字符作为span标签的内容 使用字符串保存可用的字符 在通过随机下标得到对应的字符
                   3、设置元素left的样式 也需要随机(不能越界)
                   4、设置定时器反复修改元素的top值 一旦达到底部了 将元素销毁  整个步骤1再来一次
               2、处理键盘按下 如果输入的内容与产生的内容相同 销毁 后再来一次
       */
    var timer;
    var spanDom;
    var char;
    function game() {
      spanDom = document.createElement('span')
      var str = 'qwertyuiopasdfghjkl123456789';
      var index = parseInt(Math.random() * str.length);
      //console.log(index)
      char = str[index]
      spanDom.innerHTML = char;
      // 添加小球
      document.body.appendChild(spanDom);
      // 屏幕宽度
      var nu = document.documentElement.clientWidth;
      // 小球宽度
      var spanWidth = spanDom.offsetWidth
      var index1 = parseInt(Math.random() * nu - spanWidth);
      // 小球随机左偏移
      spanDom.style.left = index1 + 'px';
      // 页面高度
      var highter = document.documentElement.clientHeight - spanDom.offsetHeight;
      // 小球高度

      timer = setInterval(function () {
        var top = spanDom.offsetTop;
        if (top >= highter) {
          clearInterval(timer);
          document.body.removeChild(spanDom)
          game();
        } else {
          spanDom.style.top = top + 5 + 'px';
        }
      }, 30)
      console.log(top)
    }
    game()
    document.onkeypress = function (e) {
      if (e.key == char) {
        clearInterval(timer);
        document.body.removeChild(spanDom);
        game()
        document.querySelector('b').innerHTML = document.querySelector('b').innerHTML - 0 + 1;
      }

    }
    console.log(spanDom.innerHTML)
  </script>
</body>

</html>